import { Component } from 'react'

// 创建类组件(优势: hooks之前功能十分强大, 劣势: 写法复杂)
class Hello extends Component {
  // 提供组件的状态
  state = {
    count: 0,
    message: 'hello react!!!',
  }

  // handeclick(e) {
  //   // e 是react中的合成事件, 仅仅是react包装了一下原来的事件对象
  //   // console.log('我被点击了', e)
  //   // 点击按钮, 让 count+1
  //   // 修改数据必须通过 this.setState() 去操作!!!
  //   // 坑: this指向undefined!!!
  //   // 解决方式:
  //   // 1. 通过剪头函数的形式
  //   // 2. 通过bind 解决this的指向
  //   // 3. 直接将事件处理函数, 定义成箭头函数即可(最最常用的)
  //   console.log(this)
  // }

  handeclick = (e) => {
    console.log(this)

    this.setState({
      // 要修改的状态名: 修改后的值
      // 切记: 永远不要去直接修改状态!!!
      count: this.state.count + 1,
      message: 'hello world' + Math.random() * 10,
    })
  }

  stoplink(e) {
    e.preventDefault()
    console.log('取消默认事件')
  }
  render() {
    // this => 组件实例
    console.log(this, 'render函数里面的this指向')
    return (
      <div>
        <p>提示信息: {this.state.message}</p>
        <h3>计数器</h3>
        <p>当前数字: {this.state.count}</p>

        {/* 解决方式一: 通过箭头函数(原因是箭头函数本身没有this, 默认绑定的外层的this) */}
        <button onClick={() => this.handeclick()}>+1 箭头函数</button>

        {/* 解决方式二: 通过bind修改this的指向(用的不多) */}
        <button onClick={this.handeclick.bind(this)}>+1 bind</button>

        {/*  */}
        <button onClick={this.handeclick}>+1 直接箭头函数</button>

        <a href="http://www.baidu.com" onClick={this.stoplink}>
          跳转阻止
        </a>
      </div>
    )
  }
}

export default Hello
